<template>
  <div class='detail-body'>
    <div class="number">
      <span>求购编号：</span>
      <p class="content color-999 ft12">WH20181230</p>
    </div>
    <div class="status">
      <span>求购状态：</span>
      <p class="content color-999 ft12">卖家未报价</p>
    </div>

    <div class="shop-info">
      <span>店铺信息：</span>
      <div>
        <p class="logo">
          <img :src="imgs.c_logo" alt="">
          <span>商铺名称</span>
        </p>
        <p class="business ft14 color-666">主营业务</p>
        <p class="indentify-info ft14 color-666">
          <span>
            <img :src="imgs.img1" alt="">企业认证
          </span>
          <span>
            <img :src="imgs.img2" alt="">保证金
          </span><span>
            <img :src="imgs.img3" alt="">仓储加工
          </span>
        </p>
      </div>
    </div>

    <div class="shop-goods">
      <span>求购商品：</span>
      <div class="table-box">
        <el-table :data="[{test:'100'}]" border style="width: 100%">
          <el-table-column label="品名" prop="test"></el-table-column>
          <el-table-column label="商品名称" prop="test"></el-table-column>
          <el-table-column label="材质" prop="test"></el-table-column>
          <el-table-column label="特性" prop="test"></el-table-column>
          <el-table-column label="数量/单位" prop="test"></el-table-column>
          <el-table-column label="地区" prop="test"></el-table-column>
        </el-table>
      </div>
    </div>

    <div class="remark">
      <span>备注：</span>
      <p>
        党和国家机关通用公文的种类国务院办公厅曾发布的《国家行政机关公文处理办法》，经过多年的实践，修订后的《办法》从1994年1月1日起施行。把公文种类调整为十二类十三种，删去“指令”、“决议”、“布告”三个文种，将“议案”作为一个新文种列入主要公文种类。即：命令（令），议案，决定，指示，公告，通告，通知，通报，报告，请示，批复，函，会议纪要。此外，中共中央办公厅于1989年4月25日发布的《中国共产党各级领导机关文件处理条例（试行）》中，正式文件的种类里还列有公报、条例、规定三个文种。这样，现在常用的公文种类总共有十六种。
      </p>
    </div>

    <div class="time">
      <span>报价时限：</span>
      <p class="content color-999 ft12">半小时</p>
    </div>

    <div class="time">
      <span>匹配商家数：</span>
      <p class="content color-999 ft12">100</p>
    </div>

    <div class="time">
      <span>已报商家数：</span>
      <p class="content color-999 ft12">100</p>
    </div>

    <div class="seller">
      <span>商家报价：</span>
      <div class="table-box">
        <el-table :data="[{test:'100'}]" border style="width: 100%">
          <el-table-column label="序号" type="index" width="60"></el-table-column>
          <el-table-column label="商品报价" prop="test"></el-table-column>
          <el-table-column label="运费" prop="test"></el-table-column>
          <el-table-column label="税点" prop="test"></el-table-column>
          <el-table-column label="税费" prop="test"></el-table-column>
          <el-table-column label="总价" prop="test"></el-table-column>

          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <div class="operate-box">
                <span class="color-red hover" @click="showBuyModel(scope)">购买</span>
                <span class="color-green hover" @click="download(scope)">下载清单</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      imgs:{
        c_logo:require('@/assets/imgs/center/c_logo.png'),
        img1:require('@/assets/imgs/center/1.png'),
        img2:require('@/assets/imgs/center/2.png'),
        img3:require('@/assets/imgs/center/3.png'),
      },
      info:{
        number:"",//编号
      }
    };
  },
  methods: {
    /**
     * @name 下载清单
     */
    download(scope){
      console.log('下载');
    },

    /**
     * @name 购买
     */
    showBuyModel(){
      console.log("购买弹框");
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.detail-body {
  padding: 15px 20px;
  
  >div{
    margin-bottom: 30px;
    display: flex;
    line-height: 25px;

    >span{
      display: inline-block;
      width: 110px;
      text-align: right;
    }
    >p{
      flex: 1;
      overflow-wrap: break-word;
      font-size: 13px;
      color: #666;
    }
    >div{
      display: inherit;
      flex: 1;
      flex-direction: column;

      .logo{
        display: flex;

        img{
          width: 36px;
          height: 36px;
          margin-right: 10px;
        }
        span{
          color: $blue;
          line-height: 36px;
          font-size: 18px;
        }
      }
      .indentify-info{
        display: flex;
        margin-top: 5px;
        span{
          margin-right: 20px;
        }
        img{
          float: left;
          width: 20px;
          height: 20px;
          margin-top: 2.5px;
          margin-right: 5px;
        }
      }
    }
  }
  .seller{
    margin-bottom: 250px;
  }

  .operate-box{
    display: flex;
    justify-content: space-around;
  }
}
</style>